import React from 'react';
import Image from 'next/image';

import './JoinAdvantage.scss';
import SvgIcon from '@/components/SvgIcon';

function JoinAdvantage() {
  const [activeTabName, setActiveTabName] = React.useState('retailer');
  const tabs = [
    {
      name: 'retailer',
      label: 'Sell with us',
      title: 'BENEFITS OF SELLING WITH DROPSHIPZONE',
      buttonText: 'BECOME A RETAILER',
      btnLink: 'https://web.dropshipzone.com.au/sell',
      image:
        'https://cdn.dropshipzone.com.au/dstheme/images/Production_line_purple.png',
      benefits: [
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/a/1-Inventory.svg',
          title: 'No inventory, no worries',
          desc: 'You don’t need to hold inventory to sell with Dropshipzone.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/a/2-Easy.svg',
          title: 'Easy to use',
          desc: 'You can place orders anytime, anywhere from a self-serve portal.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/a/3-Integrate.svg',
          title: 'Integrate in a cinch',
          desc: 'You don’t need to wait. You can start selling straight away.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/a/4-Competitive.svg',
          title: 'Stay competitive',
          desc: 'You get access to the most popular products across a growing range.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/a/5-NoMOQs.svg',
          title: 'No MOQs',
          desc: 'You only buy the product as you sell the product to your customer.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/a/7-local.svg',
          title: 'High quality products',
          desc: 'Find high quality products with the click of a button.',
        },
      ],
      bgcolor: '#942ffb',
    },
    {
      name: 'supplier',
      label: 'Supply for us',
      title: 'BENEFITS OF SUPPLYING WITH DROPSHIPZONE',
      buttonText: 'BECOME A SUPPLIER',
      buttonLink: 'https://web.dropshipzone.com.au/supply',
      image:
        'https://cdn.dropshipzone.com.au/dstheme/images/Production_line_purple_navy.png',
      benefits: [
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/2-Channel.svg',
          title: 'Sell more, more often',
          desc: 'You sell more products, more often with less cost and effort on Dropshipzone.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/3-Team.svg',
          title: 'Expand channel coverage',
          desc: 'You can connect with thousands of Aussie retailers and reach new markets.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/4-Easy.svg',
          title: 'Dedicated team',
          desc: 'You get personalised and prompt support from a Melbourne-based team.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/5-Marketing.svg',
          title: 'Easy to use',
          desc: 'You can upload products, edit listings and manage orders from anywhere.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/6-Commission.svg',
          title: 'Save on marketing costs',
          desc: 'You save on customer acquisition costs by selling on Dropshipzone.',
        },
        {
          icon: 'https://cdn.dropshipzone.com.au/dstheme/images/icons/1-SellMore.svg',
          title: 'Simple commission structure',
          desc: 'You only pay as you sell. One rate, no hidden fees.',
        },
      ],
      bgcolor: '#080255',
    },
  ];
  return (
    <div className="join-advantage">
      <div className="tabs pos-r">
        <ul className="tabs-nav">
          {tabs.map(tab => (
            <li
              key={tab.name}
              onClick={() => setActiveTabName(tab.name)}
              className={`tabs-nav-item tabs-nav-item-${tab.name} ${tab.name === activeTabName ? 'active' : ''}`}
            >
              {tab.label}
            </li>
          ))}
        </ul>
        <div className="tabs-content">
          {tabs.map(tab => (
            <div
              key={tab.name}
              className={`tab-panel overflow-hidden tab-panel-${tab.name}`}
              style={{
                display: tab.name === activeTabName ? 'block' : 'none',
              }}
            >
              <div className="sell-image">
                <div
                  className="image-line"
                  style={{ backgroundImage: `url(${tab.image})` }}
                ></div>
              </div>
              <div
                className="panel-main-container"
                style={{ backgroundColor: tab.bgcolor, paddingTop: 1 }}
              >
                <div className="panel-main content-width">
                  <div className="title">{tab.title}</div>

                  <div className="benefits flex-row">
                    {tab.benefits.map((benefit, index) => (
                      <div className="benefit" key={index}>
                        <div className="benefit-icon">
                          <Image
                            className="dis-ib mb20"
                            src={benefit.icon}
                            alt="benefit-icon"
                            width={104}
                            height={104}
                          />
                        </div>
                        <div className="benefit-title">{benefit.title}</div>
                        <div className="benefit-desc">{benefit.desc}</div>
                      </div>
                    ))}
                  </div>

                  <div className="ta-c action-line">
                    <a
                      className={`dis-ib become-btn become-btn-${activeTabName}`}
                      href={tab.buttonLink}
                    >
                      <span className="mr10 va-m">{tab.buttonText}</span>
                      <SvgIcon name="arrow-right" width={20} height={20} />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default JoinAdvantage;
